{% extends "base.html" %}

{% block styles %}
<style>
/* 遮罩层样式 */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.loading-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
}

.loading-spinner i {
    font-size: 40px;
    margin-bottom: 10px;
}

/* 自定义弹窗样式 */
.custom-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    width: 90%;
    max-width: 600px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.modal-header h3 {
    margin: 0;
    color: #333;
}

.close-modal {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
}

.modal-body textarea {
    width: 100%;
    min-height: 200px;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-footer button {
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
}

.modal-footer .cancel-btn {
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #666;
}

.modal-footer .submit-btn {
    background: var(--primary-color);
    border: none;
    color: white;
}
</style>
{% endblock %}

{% block content %}
<div class="admin-dashboard container">
    <div class="admin-header">
        <h1>爱人管理</h1>
        <a href="{{ url_for('admin.index') }}" class="btn">返回首页</a>
    </div>

    <div class="admin-form card">
        <h2>添加新爱人</h2>
        <form method="POST" action="{{ url_for('admin.manage_couples') }}" enctype="multipart/form-data">
            {{ form.hidden_tag() }}
            <div class="form-grid">
                <div class="form-group">
                    {{ form.season.label }}
                    {{ form.season(class="form-control") }}
                    {% for error in form.season.errors %}
                    <span class="error">{{ error }}</span>
                    {% endfor %}
                </div>
                <div class="form-group">
                    {{ form.marriage_years.label }}
                    {{ form.marriage_years(class="form-control") }}
                    {% for error in form.marriage_years.errors %}
                    <span class="error">{{ error }}</span>
                    {% endfor %}
                </div>
            </div>

            <div class="couple-section">
                <h3>丈夫信息</h3>
                <div class="form-grid">
                    <div class="form-group">
                        {{ form.husband_name.label }}
                        {{ form.husband_name(class="form-control") }}
                        {% for error in form.husband_name.errors %}
                        <span class="error">{{ error }}</span>
                        {% endfor %}
                    </div>
                    <div class="form-group">
                        {{ form.husband_age.label }}
                        {{ form.husband_age(class="form-control") }}
                        {% for error in form.husband_age.errors %}
                        <span class="error">{{ error }}</span>
                        {% endfor %}
                    </div>
                    <div class="form-group">
                        {{ form.husband_occupation.label }}
                        {{ form.husband_occupation(class="form-control") }}
                        {% for error in form.husband_occupation.errors %}
                        <span class="error">{{ error }}</span>
                        {% endfor %}
                    </div>
                    <div class="form-group">
                        {{ form.husband_avatar.label }}
                        {{ form.husband_avatar(class="form-control") }}
                        <small class="form-text text-muted">支持JPG、PNG、GIF格式，大小不超过5MB</small>
                    </div>
                </div>
            </div>

            <div class="couple-section">
                <h3>妻子信息</h3>
                <div class="form-grid">
                    <div class="form-group">
                        {{ form.wife_name.label }}
                        {{ form.wife_name(class="form-control") }}
                        {% for error in form.wife_name.errors %}
                        <span class="error">{{ error }}</span>
                        {% endfor %}
                    </div>
                    <div class="form-group">
                        {{ form.wife_age.label }}
                        {{ form.wife_age(class="form-control") }}
                        {% for error in form.wife_age.errors %}
                        <span class="error">{{ error }}</span>
                        {% endfor %}
                    </div>
                    <div class="form-group">
                        {{ form.wife_occupation.label }}
                        {{ form.wife_occupation(class="form-control") }}
                        {% for error in form.wife_occupation.errors %}
                        <span class="error">{{ error }}</span>
                        {% endfor %}
                    </div>
                    <div class="form-group">
                        {{ form.wife_avatar.label }}
                        {{ form.wife_avatar(class="form-control") }}
                        <small class="form-text text-muted">支持JPG、PNG、GIF格式，大小不超过5MB</small>
                    </div>
                </div>
            </div>

            <div class="form-group">
                {{ form.story.label }}
                {{ form.story(class="form-control", rows=5) }}
                {% for error in form.story.errors %}
                <span class="error">{{ error }}</span>
                {% endfor %}
            </div>

            <div class="form-actions">
                <button type="submit" class="btn">添加爱人</button>
            </div>
        </form>
    </div>

    <div class="table-container card">
        <h2>现有爱人</h2>
        <table class="admin-table">
            <thead>
                <tr>
                    <th>季数</th>
                    <th>丈夫</th>
                    <th>妻子</th>
                    <th>结婚年限</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for couple in couples %}
                <tr>
                    <td>第{{ couple.season }}季</td>
                    <td>{{ couple.husband_name }}</td>
                    <td>{{ couple.wife_name }}</td>
                    <td>{{ couple.marriage_years }}年</td>
                    <td class="action-buttons">
                        <a href="{{ url_for('main.couple_detail', id=couple.id) }}" class="btn btn-sm" target="_blank">查看</a>
                        <a href="{{ url_for('admin.edit_couple', id=couple.id) }}" class="btn btn-sm">编辑</a>
                        <button class="btn btn-sm btn-primary ai-summary-btn" data-id="{{ couple.id }}">AI总结评论区</button>
                        <button class="btn btn-sm btn-danger delete-btn" data-id="{{ couple.id }}" data-type="couples">删除</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- 添加遮罩层 -->
<div class="overlay">
    <div class="loading-spinner">
        <i class="fas fa-spinner fa-spin"></i>
        <p>AI正在分析评论...</p>
    </div>
</div>

<!-- 添加自定义弹窗 -->
<div class="custom-modal">
    <div class="modal-header">
        <h3>AI评论总结</h3>
        <button class="close-modal">&times;</button>
    </div>
    <div class="modal-body">
        <textarea id="summary-content"></textarea>
    </div>
    <div class="modal-footer">
        <button class="cancel-btn">取消</button>
        <button class="submit-btn">发布为评论</button>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
<script>
// 显示/隐藏遮罩层
function toggleOverlay(show) {
    document.querySelector('.overlay').style.display = show ? 'block' : 'none';
}

// 显示/隐藏弹窗
function toggleModal(show, content = '') {
    const modal = document.querySelector('.custom-modal');
    modal.style.display = show ? 'block' : 'none';
    if (show && content) {
        document.getElementById('summary-content').value = content;
    }
}

// 绑定弹窗关闭事件
document.querySelector('.close-modal').addEventListener('click', () => toggleModal(false));
document.querySelector('.cancel-btn').addEventListener('click', () => toggleModal(false));

// AI总结按钮点击事件
document.querySelectorAll('.ai-summary-btn').forEach(btn => {
    btn.addEventListener('click', async function() {
        const coupleId = this.dataset.id;
        
        try {
            // 检查是否有评论
            const checkResponse = await fetch(`/admin/couple/${coupleId}/check_comments`);
            const checkData = await checkResponse.json();
            
            if (!checkData.has_comments) {
                alert('该情侣暂无评论可供总结');
                return;
            }
            
            // 显示加载遮罩
            toggleOverlay(true);
            
            // 获取AI总结
            const response = await fetch(`/admin/couple/${coupleId}/ai_summary`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                }
            });
            
            const data = await response.json();
            
            // 隐藏加载遮罩
            toggleOverlay(false);
            
            if (response.ok) {
                // 显示自定义弹窗
                toggleModal(true, data.summary);
                
                // 绑定发布按钮事件
                document.querySelector('.submit-btn').onclick = async () => {
                    const summary = document.getElementById('summary-content').value;
                    if (!summary.trim()) {
                        alert('内容不能为空');
                        return;
                    }
                    
                    const commentResponse = await fetch(`/comment/${coupleId}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            content: summary
                        })
                    });
                    
                    if (commentResponse.ok) {
                        alert('AI总结已发布为评论！');
                        toggleModal(false);
                    } else {
                        alert('发布评论失败，请重试');
                    }
                };
            } else {
                alert('获取AI总结失败：' + data.error);
            }
        } catch (error) {
            console.error('Error:', error);
            alert('操作失败，请稍后重试');
            toggleOverlay(false);
        }
    });
});
</script>
{% endblock %} 